<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>问卷调查系统-编辑问卷</title>
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/edit.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/common/util.js"></script>
</head>

<body>
    <!--  头部  -->
    <div id="header" class="clear">
        <ul class="nav-list">
            <li class="nav-item"><a href="index.html">我的问卷</a></li>
        </ul>
        <div class="avatar">
            <img src="img/avatar.jpg" alt="">
            <span>用户</span>
        </div>
    </div>

    <!--主体-->
    <div id="main">
        <div class="container">
            <div class="edit-box">
                <div class="edit-title-box">
                    <input id="question-title" type="text" placeholder="点击输入标题">
                </div>
                <div class="question-list-box">
                    <ul id="question-list" class="question-list">
                    </ul>
                </div>
                <div id="edit-question-box" class="edit-question-box">
                    <div id="choose-question-type" class="choose-question-type">
                        <div class="question-btn-list">
                            <button id="btn-simple" class="btn"><i class="iconfont icon-danxuankuangxuanzhong"></i>
                                单选题</button>
                            <button id="btn-multiple" class="btn"><i class="iconfont icon-xuanzhong"></i> 多选题</button>
                            <button id="btn-text" class="btn"><i class="iconfont icon-wenbenkuang"></i> 文本题</button>
                        </div>
                    </div>
                    <div id="edit-question-button" class="edit-question-button">
                        <i class="iconfont icon-add">添加问题</i>
                    </div>
                </div>
                <div class="edit-operation-box clear">
                    <div class="edit-date-box fl">
                        <span><i class="iconfont icon-calendar"></i> 问卷截止日期</span>
                        <input id="choose-deadline" type="text" placeholder="点击选择" maxlength="0">
                        <div id="calendar">
                            <!-- 日历顶部的标题区域 -->
                            <div class="calendar-title-box">
                                <h1 class="theme-color" id="calendar-title">MONTH</h1>
                                <h2 class="theme-color small" id="calendar-year">Year</h2>
                                <a href="" id="prev">&lt;</a>
                                <a href="" id="next">&gt;</a>
                            </div>
                            <!-- 日历的日期区域 -->
                            <div class="date-box clear">
                                <div class="lightgrey date-list">
                                    <ul>
                                        <li>一</li>
                                        <li>二</li>
                                        <li>三</li>
                                        <li>四</li>
                                        <li>五</li>
                                        <li>六</li>
                                        <li>日</li>
                                    </ul>
                                </div>
                                <div class="darkgrey date-list">
                                    <ul id="days">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="edit-save-box fr">
                        <button id="btn-save" class="btn btn-normal btn-save"><i class="iconfont icon-save-copy"></i>
                            保存问卷</button>
                        <button id="btn-publish" class="btn btn-normal btn-publish"><i class="iconfont icon-fabu"></i>
                            发布问卷</button>
                        <button style="display: none;" id="btn-confirm-publish" class="btn btn-success"><i
                                class="iconfont icon-fabu"></i> 确认发布
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg" id="bg-top-left"></div>
    <div class="bg" id="bg-top-right"></div>
    <div class="bg" id="bg-bottom-left"></div>
    <div class="bg" id="bg-bottom-right"></div>

    <template id="simple-template">
        <li class="question-item" data-id="{id}">
            <div class="title-box">
                <span class="question-number">Q{id}</span>
                <span class="question-type"><i class="iconfont icon-danxuankuangxuanzhong"></i> 单选题</span>
            </div>
            <input class="question-title" type="text" placeholder="点击输入问题" value="{title}">
            <ul class="item-list" data-id="{id}">
                {items}
            </ul>
            <ul class="operation-list clear" data-id="{id}" data-type="question-operation">
                <li class="operation-up"><i class="iconfont icon-direction-up icon-operation">上移</i></li>
                <li class="operation-down"><i class="iconfont icon-direction-down icon-operation">下移</i></li>
                <li class="operation-copy"><i class="iconfont icon-copydownlink icon-operation">复用</i></li>
                <li class="operation-insert">
                    <i class="iconfont icon-charu icon-operation">插入</i>
                    <ul class="insert-list" data-id="{id}" data-type="insert-list">
                        <li data-type="insert-radio"><i class="iconfont icon-danxuankuangxuanzhong"> 单选题</i></li>
                        <li data-type="insert-checkbox"><i class="iconfont icon-xuanzhong"> 多选题</i></li>
                        <li data-type="insert-text"><i class="iconfont icon-wenbenkuang"> 文本题</i></li>
                    </ul>
                </li>
                <li class="operation-del"><i class="iconfont icon-ashbin icon-operation">删除</i></li>
            </ul>
        </li>
    </template>
    <template id="simple-item-template">
        <li data-id="{id}" data-type="item-operation">
            <a class="up-question"><i class="iconfont icon-arrow-up-circle"></i></a>
            <a class="down-question"><i class="iconfont icon-direction-down-circle"></i></a>
            <a class="add-question"><i class="iconfont icon-add-circle"></i></a>
            <a class="del-question"><i class="iconfont icon-minus-circle"></i></a>
            <input type="radio" name="question1">
            <input type="text" class="question-item-input" placeholder="输入选项" value="{content}" data-id="{id}">
        </li>
    </template>
    <template id="multiple-template">
        <li class="question-item" data-id="{id}">
            <div class="title-box">
                <span class="question-number">Q{id}</span>
                <span class="question-type"><i class="iconfont icon-xuanzhong"></i> 多选题</span>
            </div>
            <input class="question-title" type="text" placeholder="点击输入问题" value="{title}">
            <ul class="item-list" data-id="{id}">
                {items}
            </ul>
            <ul class="operation-list clear" data-id="{id}" data-type="question-operation">
                <li class="operation-up"><i class="iconfont icon-direction-up icon-operation">上移</i></li>
                <li class="operation-down"><i class="iconfont icon-direction-down icon-operation">下移</i></li>
                <li class="operation-copy"><i class="iconfont icon-copydownlink icon-operation">复用</i></li>
                <li class="operation-insert">
                    <i class="iconfont icon-charu icon-operation">插入</i>
                    <ul class="insert-list" data-id="{id}" data-type="insert-list">
                        <li data-type="insert-radio"><i class="iconfont icon-danxuankuangxuanzhong"> 单选题</i></li>
                        <li data-type="insert-checkbox"><i class="iconfont icon-xuanzhong"> 多选题</i></li>
                        <li data-type="insert-text"><i class="iconfont icon-wenbenkuang"> 文本题</i></li>
                    </ul>
                </li>
                <li class="operation-del"><i class="iconfont icon-ashbin icon-operation">删除</i></li>
            </ul>
        </li>
    </template>
    <template id="multiple-item-template">
        <li data-id="{id}" data-type="item-operation">
            <a class="up-question"><i class="iconfont icon-arrow-up-circle"></i></a>
            <a class="down-question"><i class="iconfont icon-direction-down-circle"></i></a>
            <a class="add-question"><i class="iconfont icon-add-circle"></i></a>
            <a class="del-question"><i class="iconfont icon-minus-circle"></i></a>
            <input type="checkbox" name="question2" id="question2-checkbox1">
            <input type="text" class="question-item-input" placeholder="输入选项" value="{content}" data-id="{id}">
        </li>
    </template>
    <template id="text-template">
        <li class="question-item" data-id="{id}">
            <div class="title-box">
                <span class="question-number">Q{id}</span>
                <span class="question-type"><i class="iconfont icon-wenbenkuang"></i> 简答题</span>
                <span class="question-necessary">
                    <input type="checkbox" class="checkbox-necessary" data-id="{id}" {checked}>
                    <span>是否必填</span>
                </span>
            </div>
            <input class="question-title" type="text" placeholder="点击输入问题" value="{title}">
            <textarea class="question-textarea" name="" placeholder="仅做示意，无需填写" disabled></textarea>
            <ul class="operation-list clear" data-id="{id}" data-type="question-operation">
                <li class="operation-up"><i class="iconfont icon-direction-up icon-operation">上移</i></li>
                <li class="operation-down"><i class="iconfont icon-direction-down icon-operation">下移</i></li>
                <li class="operation-copy"><i class="iconfont icon-copydownlink icon-operation">复用</i></li>
                <li class="operation-insert">
                    <i class="iconfont icon-charu icon-operation">插入</i>
                    <ul class="insert-list" data-id="{id}" data-type="insert-list">
                        <li data-type="insert-radio"><i class="iconfont icon-danxuankuangxuanzhong"> 单选题</i></li>
                        <li data-type="insert-checkbox"><i class="iconfont icon-xuanzhong"> 多选题</i></li>
                        <li data-type="insert-text"><i class="iconfont icon-wenbenkuang"> 文本题</i></li>
                    </ul>
                </li>
                <li class="operation-del"><i class="iconfont icon-ashbin icon-operation">删除</i></li>
            </ul>
        </li>
    </template>
    <div id="message-box" class="message-box"></div>
    <div id="layer-mask"></div>
    <div id="confirm-box" class="confirm-box">
        <a id="close-confirm" class="btn-close"><i class="iconfont icon-close"></i></a>
        <div id="confirm-content" class="confirm-content"></div>
        <div class="confirm-btn-box">
            <button id="btn-confirm" class="btn btn-normal">确定</button>
            <button id="btn-cancel" class="btn btn-cancel">取消</button>
        </div>
    </div>
    <script src="js/edit/edit.js"></script>
    <script src="js/edit/calendar.js"></script>
</body>

</html>
